<div id="tb<?php echo $uniqid;?>" style="padding:5px">
    <table cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <td><a href="javascript:void(0);" onclick="memberAdd();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-tianjia1"></i><span
                    class="l-btn-text">增加</span></span></a></td>
            <td>
                <div class="datagrid-btn-separator"></div>
            </td>
            <td><a href="javascript:void(0);" onclick="memberEdit();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-bianji"></i><span
                    class="l-btn-text">编辑</span></span></a></td>
            <td>
                <div class="datagrid-btn-separator"></div>
            </td>
            <td><a href="javascript:void(0);" onclick="memberMerge();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-rongna"></i><span
                    class="l-btn-text">合并账号</span></span></a></td>
            <td>
                <div class="datagrid-btn-separator"></div>
            </td>
            <td><a href="javascript:void(0);" onclick="memberReload();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                    class="l-btn-text">重载</span></span></a></td>
            <td><span style="line-height:30px;">注册日期</span>
                <input id="memberStartOn" style="width:152px" type="text" class="easyui-datetimebox"> </input>至
                <input id="memberEndOn" style="width:152px" type="text" class="easyui-datetimebox"> </input>
            </td>
            <td>
                <select id="memberKeywordsType" class="forminput inputstyle textbox-text validatebox-text" style="width:80px">
                    <option value="id">会员ID</option>
                    <option value="nickname">会员昵称</option>
                    <option value="phone">手机号</option>
                </select></td>
            <td><input id="memberKeywords" style="width:120px" type="text"
                                class="easyui-input textbox"></td>
            <td>
                <select id="memberStatus" class="forminput inputstyle textbox-text validatebox-text" style="width:110px" onchange="memberSearch()">
                    <option value="">--全部状态--</option>
                    <option value="normal">正常</option>
                    <option value="frozen">冻结</option>
                    <option value="lock">锁定</option>
                    <option value="deleted">已删除</option>
                </select></td>
            <td><a href="javascript:void(0);" onclick="memberSearch();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
                    class="l-btn-text">查询</span></span></a></td>
            <td><a href="javascript:void(0);" onclick="memberReset();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
                    class="l-btn-text">重置</span></span></a></td>
            <td><a href="javascript:void(0);" onclick="memberExport();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiazai"></i><span
                    class="l-btn-text">导出会员</span></span></a></td>
        </tr>
        </tbody>
    </table>
</div>
<div class="con"  style="-moz-user-select:none;">
    <table id="member"></table>
</div>
<div id="memberdlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<div id="memberteamdlg" class="easyui-dialog" style="width:940px; height:560px;" title="信息框" closed="true"></div>
<script>
    var memberIndexVm = new Vue({
        el: '#tb<?php echo $uniqid;?>',
        data:{},
        methods: {
            memberExport: function (){
                memberExport();
            }
        }
    });
    var enable_restore = "<?php echo $enable_restore;?>";
    var memberTotalConsume = function (nickname, id) {
        let name = nickname || ($('#member').datagrid('getSelected') && $('#member').datagrid('getSelected').nickname);
        let rowId = id || ($('#member').datagrid('getSelected') && $('#member').datagrid('getSelected').id);
        if (rowId) {
            $("#memberteamdlg").dialog({
                title: name + '-个人消费明细',
                closed: false,
                width: 940,
                height: 560,
                cache: false,
                href: '/admin/member/totalConsume?id=' + rowId + '&name=' + name,
                modal: true,
                buttons: [{
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $("#memberteamdlg").dialog('close');
                    }
                }]
            });
        } else {
            $.messager.alert('提示', '请先选择要查看的记录！', 'warning');
        }
    };
    var memberExport = function () {
        showLoading('.con');
        $.post('/admin/member/export', {
            keywordsType: $('#memberKeywordsType').val(),
            keywords: $('#memberKeywords').val(),
            start_on: $('#memberStartOn').val(),
            end_on: $('#memberEndOn').val(),
            status: $('#memberStatus').val(),
        }, function (data) {
            hideLoading();
            if (parseInt(data.ret) === 0) {
                $.messager.show({
                    title: '提示',
                    msg: data.msg,
                    timeout: 3000,
                    showType: 'slide'
                });
                eventmaterialDownload(data.data);
            } else {
                $.messager.alert('提示', data.msg, 'warning');
            }
        }, 'json').fail((response)=> {
            hideLoading();
            $.messager.alert('提示', response.responseText, 'warning');
        });
    };
    var memberAdd = function () {
        $("#memberdlg").dialog({
            title: '新增信息',
            closed: false,
            width: 840,
            height: 565,
            cache: false,
            href: '/admin/member/add',
            modal: true,
            buttons: [{
                text: '保存',
                id: 'membersubmit',
                iconCls: 'icon-ok',
            }, {
                text: '关闭',
                iconCls: 'icon-no',
                handler: function () {
                    $("#memberdlg").dialog('close');
                }
            }]
        });
    };
    var memberEdit = function (id) {
        let rowId = id || ($('#member').datagrid('getSelected') && $('#member').datagrid('getSelected').id);
        if (rowId) {
            $("#memberdlg").dialog({
                title: '会员详情',
                closed: false,
                width: 840,
                height: 565,
                cache: false,
                href: '/admin/member/edit?id=' + rowId,
                modal: true,
                buttons: [{
                    text: '保存',
                    id: 'membersubmit',
                    iconCls: 'icon-ok',
                }, {
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $("#memberdlg").dialog('close');
                    }
                }]
            });
        } else {
            $.messager.alert('提示', '请先选择要编辑的行！', 'warning');
        }
    };
    var memberMerge = function (id) {
        $("#memberdlg").dialog({
            title: '合并账号',
            closed: false,
            width: 840,
            height: 565,
            cache: false,
            href: '/admin/member/merge',
            modal: true,
            buttons: [{
                text: '提交',
                id: 'membersubmit',
                iconCls: 'icon-ok',
            }, {
                text: '关闭',
                iconCls: 'icon-no',
                handler: function () {
                    $("#memberdlg").dialog('close');
                }
            }]
        });
    };
    var memberDelete = function (id) {
        let rowId = id || ($('#member').datagrid('getSelected') && $('#member').datagrid('getSelected').id);
        if (rowId) {
            $.messager.confirm('提示', '确定删除吗？', function (r) {
                if (r) {
                    $.messager.progress();
                    $.post('/admin/member/delete', {id: rowId}, function (data) {
                        $.messager.progress('close');
                        if (parseInt(data.ret) === 0) {
                            $.messager.show({
                                title: '提示',
                                msg: data.msg,
                                timeout: 3000,
                                showType: 'slide'
                            });
                            memberReload();
                        } else {
                            $.messager.alert('提示', data.msg, 'warning');
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.alert('提示', '请先选择要删除的行！', 'warning');
        }
    };
    var memberRestore = function (id) {
        let rowId = id || ($('#member').datagrid('getSelected') && $('#member').datagrid('getSelected').id);
        if (rowId) {
            $.messager.confirm('提示', '确定恢复数据吗？', function (r) {
                if (r) {
                    $.messager.progress();
                    $.post('/admin/member/restore', {id: rowId}, function (data) {
                        $.messager.progress('close');
                        if (parseInt(data.ret) === 0) {
                            $.messager.show({
                                title: '提示',
                                msg: data.msg,
                                timeout: 3000,
                                showType: 'slide'
                            });
                            memberReload();
                        } else {
                            $.messager.alert('提示', data.msg, 'warning');
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.alert('提示', '请先选择要删除的行！', 'warning');
        }
    };
    var memberReload = function () {
        $("#member").datagrid('reload');
    };
    var memberReset = function (){
        $('#memberKeywords').val('');
        $('#tb<?php echo $uniqid;?> #memberStartOn').datetimebox('setValue', '');
        $('#tb<?php echo $uniqid;?> #memberEndOn').datetimebox('setValue', '');
        memberSearch();
    };
    var memberSearch = function () {
        var height = $(window).height() - $(".top").height() - 46;
        var width = $(window).width() - $(".leftmenu").width() - 8;
        $("#member").datagrid({
            title: '会员列表',
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 10,
            pageList: [10, 15, 20, 25],
            method: 'post',
            sortName: 'id',
            sortOrder: 'desc',
            idField: 'id',
            url: '/admin/member/index',
            queryParams: {
                keywordsType: $('#memberKeywordsType').val(),
                keywords: $('#memberKeywords').val(),
                start_on: $('#memberStartOn').val(),
                end_on: $('#memberEndOn').val(),
                status: $('#memberStatus').val(),
            },
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            toolbar: '#tb<?php echo $uniqid;?>',
            columns: [[
                {field: 'id', title: 'ID', width: '5%'},
                {
                    field: 'avatar', title: '头像', width: '5%', formatter: function (value, rowData, rowIndex) {
                        return value ? "<img height='50px' src='" + value + "'>" : '';
                    }
                },

                {
                    field: 'wx_qrcode', title: '收款码', width: '5%', formatter: function (value, rowData, rowIndex) {
                        return value ? "<img height='50px' src='" + value + "'>" : '';
                    }
                },

                {field: 'open_account_mobile', title: '银行预留手机号', width: '10%'},

                {field: 'collection_name', title: '收款人', width: '10%'},
                {field: 'card_num', title: '银行卡号', width: '10%'},
                {field: 'bank_name', title: '开户行', width: '10%'},


                {field: 'nickname', title: '用户', width: '10%', formatter: function (value, rowData, rowIndex) {
                        return value + (rowData.deleted_at ? '<span style="color: red">(已删除)</span>' : '');
                    }},
                {field: 'parent_member_id', title: '老师', width: '10%'},
                {field: 'phone', title: '手机号', width: '10%'},
                {
                    field: 'level_info', title: '身份', width: '10%', formatter(value, rowData) {
                        return value ? value.name : '普通会员';
                    }
                },
                {
                    field: 'oauth', title: '第三方帐号', width: '10%', formatter(value, rowData) {
                        let oauth = '';
                        value.forEach((it)=>{
                            switch (it.platform){
                                case 'wxOfficialAccount':
                                    oauth += "<img style='height: 30px;' src='/imgs/user/Wechat-wxOfficialAccount.png'/>";
                                    break;
                                case 'App':
                                    oauth += "<img style='height: 30px;'  src='/imgs/user/Wechat-App.png' />";
                                    break;
                                case 'wxMiniProgram':
                                    oauth += "<img style='height: 30px;'  src='/imgs/user/Wechat-wxMiniProgram.png' />";
                                    break;
                            }
                        });
                        return oauth;
                    }
                },
                {field: 'people', title: '消费补贴', width: '8%', sortable: true},
                {field: 'money', title: '余额', width: '8%', sortable: true},
                {field: 'score', title: '积分', width: '8%', sortable: true},
                {field: 'score_frozen',  title: '冻结积分', width: '8%', sortable: true},
                {field: 'total_consume', title: '消费金额', width: '8%', sortable: true, formatter: function (value, rowData, rowIndex) {
                        return value > 0 ? "<a style='cursor: pointer' href='javascript:void(0)' onclick='memberTotalConsume(\"" + rowData.nickname + '\",' + rowData.id + ")'>" + value + "</a>" : 0;
                    }},
                {
                    field: 'status', title: '状态', align:'center', width: '8%', formatter: function (value, rowData, rowIndex) {
                        if(rowData.deleted_at){
                            return '<span style="color:red">已删除</span>';
                        }else {
                            switch (value) {
                                case 'normal':
                                    return '正常';
                                case 'frozen':
                                    return '冻结';
                                case 'lock':
                                    return '锁定';
                            }
                        }
                    }
                },

                {
                    field: 'is_zmd', title: '专卖店', align:'center', width: '8%', formatter: function (value, rowData, rowIndex) {
                        if(rowData.deleted_at){
                            return '<span style="color:red">已删除</span>';
                        }else {
                            switch (value) {
                                case 1:
                                    return '否';
                                case 2:
                                    return '是';

                            }
                        }
                    }
                },

                {
                    field: 'is_partner', title: '合伙人', align:'center', width: '8%', formatter: function (value, rowData, rowIndex) {
                        if(rowData.deleted_at){
                            return '<span style="color:red">已删除</span>';
                        }else {
                            switch (value) {
                                case 1:
                                    return '否';
                                case 2:
                                    return '是';

                            }
                        }
                    }
                },

                {field: 'created_at', title: '加入时间', width: '10%', sortable: true},
                {
                    field: 'options',
                    title: '操作',
                    align: 'center',
                    width: '13%',
                    formatter: function (value, rowData, rowIndex) {
                        let buttons = '<div class="table"><span class="l-btn l-btn-small color9 table" onclick="memberEdit(\'' + rowData.id + '\')"><span class="l-btn-text">详情</span></span>';
                        if(rowData.deleted_at){
                            if(enable_restore) {
                                buttons += '<span class="l-btn l-btn-small color9 table" onclick="memberRestore(\'' + rowData.id + '\')"><span class="l-btn-text">恢复</span></span>';
                            }
                        }else{
                            buttons += '<span class="l-btn l-btn-small color9 table" onclick="memberDelete(\'' + rowData.id + '\')"><span class="l-btn-text">删除</span></span>';
                        }
                        return buttons + '</div>';
                    }
                },
            ]],
            onDblClickRow: function (index, field) {
                memberEdit();
            }
        });
    };
    onDatagridResize("#member");
    memberSearch();
</script>
